<template>
  <div class="box">
    <div class="login_frame"></div>
    <div class="LoginWindow">
      <div>
        <div class="login">
          <p>
            <label for="login">帐号:</label>
            <a-input v-model="username" type="text" name="id" id="id" @keyup.enter="submitBtn" />
          </p>

          <p>
            <label for="password">密码:</label>
            <a-input v-model="password" type="password" name="password" id="password" @keyup.enter="submitBtn"  />
          </p>

          <p class="login-submit">
            <button class="login-button"  @click="submitBtn">Login</button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
	import 'ant-design-vue/lib/input/style/index.css';
	import {Input} from 'ant-design-vue' 
import { Component, Prop, Vue } from "vue-property-decorator";

const  md5  = require('js-md5');
@Component({
  components: {
	  aInput:Input,
  },
})
export default class login extends Vue {
  private username: any = "游客";
  private password: any = "游客88888888";
  private async submitBtn(e: any) {
    if (!this.username && !this.password) {
      return  this.$message.error("请输入昵称或密码", 2);
    } else {
     const data = {
       username:this.username,
       password:md5(this.password)
     }
       this.$store.dispatch("loginAxios",data)
    }
  }
}
</script>
<style scoped>
/* .login-submit ext-shad*/
.box {
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #404040;
  line-height: 1;
}
.box,
.login-submit,
.login-submit:before,
.login-submit:after {
  background: #373737 url("../assets/img/bg.png") 0 0 repeat;
}
label {
  margin-right: 5px;
}
.LoginWindow {
  display: "";
  height: 200px;
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  margin-left: -205px;
  border: 1px solid #666;
  background: #373737 url("../assets/img/bg.png") 0 0 repeat;
  animation: LoginWindow 2s linear;
}
@keyframes LoginWindow {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
    margin-top: -115px;
    margin-left: -195px;
  }
  70% {
    filter: alpha(opacity=1);
    opacity: 1;
    margin-top: -115px;
    margin-left: -195px;
  }
  100% {
    margin-top: -125px;
    margin-left: -205px;
  }
}

.login_frame {
  height: 200px;
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -124px;
  margin-left: -204px;
  box-shadow: 10px 10px 1px #000000;
  animation: login_frame 2s linear;
}
@keyframes login_frame {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  70% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=1);
    opacity: 1;
  }
}

.login {
  position: relative;
  margin: 50px 0px 0px 20px;
  width: 400px;
  padding-right: 32px;
  font-weight: 300;
  color: #a8a7a8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}
.login p {
  margin: 0 0 10px;
}
input,
button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  box-sizing: border-box;
}
input[type="text"],
input[type="password"] {
  padding: 0 10px;
  width: 300px;
  height: 40px;
  color: #bbb;
  background: rgba(0, 0, 0, 0.16);
  border: 0;
  border-radius: 5px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3),
    0 1px rgba(255, 255, 255, 0.06);
}

.login-submit {
  position: absolute;
  top: 22px;
  right: 57px;
  width: 48px;
  height: 48px;
  padding: 8px;
  border-radius: 32px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}
.login-submit:before,
.login-submit:after {
  content: "";
  z-index: 1;
  position: absolute;
}
.login-submit:after {
  top: -4px;
  bottom: -4px;
  right: -4px;
  width: 36px;
}

.login-button {
  position: relative;
  top: -4px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0 0 40px;
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  transition-duration: 0.8s;
  transdiv: rotate(180deg);
  animation: login_button 3s;
}
@keyframes login_button {
  0% {
    transdiv: rotate(0deg);
  }
  70% {
    transdiv: rotate(0deg);
  }
  100% {
    transdiv: rotate(180deg);
  }
}
.login-button:hover {
  transdiv: rotate(360deg);
}
.login-button:before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background: #00a2d3;
  border-radius: 24px;
  background-image: linear-gradient(to bottom, #00a2d3, #0d7796);
}
.login-button:active:before {
  background: #0591ba;
  background-image: linear-gradient(to bottom, #0591ba, #00a2d3);
}
.login-button:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  width: 25px;
  height: 19px;
  background: url("../assets/img/arrow.png") 0 0 no-repeat;
}
</style>